<template>
  <div class="ruoyi">
    <div class="login" v-show="addListshow == 1" :key="tableData.length">
      <!-- 中间列表 -->
      <div class="table">
        <el-button type="primary" icon="el-icon-plus" @click="add"
          >新增</el-button
        >

        <el-button
          type="danger"
          icon="el-icon-close"
          style="background-color: crimson"
          @click="quit"
          >退出</el-button
        >
        <!-- 右边矢量图 -->
        <el-button-group class="iconright">
          <el-button
            type="primary"
            icon="el-icon-search"
            style="
              background-color: white;
              color: #676a6c;
              border: 1px solid #e7e7e7;
            "
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            style="
              background-color: white;
              color: #676a6c;
              border: 1px solid #e7e7e7;
            "
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-tickets"
            style="
              background-color: white;
              color: #676a6c;
              border: 1px solid #e7e7e7;
            "
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-s-grid"
            style="
              background-color: white;
              color: #676a6c;
              border: 1px solid #e7e7e7;
            "
          ></el-button>
          <!-- @click="bjfuc" -->
        </el-button-group>

        <div class="checkgroup" v-if="this.judgenum">
          <input
            type="checkbox"
            checked="checked"
            v-model="manyc[0]"
          />商品名称<br />
          <input
            type="checkbox"
            checked="checked"
            v-model="manyc[1]"
          />商品介绍<br />
          <input
            type="checkbox"
            checked="checked"
            v-model="manyc[2]"
          />价格<br />
          <input
            type="checkbox"
            checked="checked"
            v-model="manyc[3]"
          />剩余库存<br />
        </div>

        <el-table
          ref="multipleTable"
          :data="
            tableDataCopy.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            prop="id"
            label="商品id"
            sortable
            width="100"
            v-if="manyc[0]"
          >
          </el-table-column>
          <el-table-column
            prop="productName"
            label="商品名称"
            sortable
            width="200"
            v-if="manyc[0]"
          >
          </el-table-column>

          <el-table-column
            prop="productMoney"
            label="价格"
            width="120"
            v-if="manyc[2]"
          >
          </el-table-column>

          <el-table-column
            prop="productPic"
            label="商品图片"
            width="160"
            v-if="manyc[4]"
          >
            <template slot-scope="scope">
              <img
                :src="scope.row.productPic"
                style="width: 100px; height: 100px"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="productRecommend"
            label="推荐"
            width="200"
            v-if="manyc[4]"
          >
          </el-table-column>
          <el-table-column
            prop="goodsid"
            label="goodsid"
            width="100"
            v-if="manyc[4]"
          >
          </el-table-column>
          <el-table-column
            prop="commodityTypeId"
            label="分类id"
            width="100"
            v-if="manyc[4]"
          >
          </el-table-column>
          <el-table-column label="操作" width="250" v-if="manyc[8]">
            <template slot-scope="scope">
              <el-button
                @click="bjRow(scope.$index, scope.row)"
                type="primary"
                size="small"
                icon="el-icon-delete"
              >
                编辑
              </el-button>
              <el-button
                @click="addshoping(scope.row.goodsid)"
                type="primary"
                size="small"
                icon="el-icon-delete"
              >
                添加商品规格
              </el-button>
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableDataCopy)"
                type="danger"
                size="small"
                icon="el-icon-delete"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-button @click="toggleSelection()">取消选择</el-button>
        </div>
      </div>
      <!-- 分页器 -->
      <div class="clear"></div>
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage3"
          :page-size="pageSize"
          :page-sizes="pageSizes"
          layout="prev, pager, next, sizes, total, jumper"
          :total="tableDataCopy.length"
        >
        </el-pagination>
      </div>
    </div>

    <div class="clear"></div>
    <!-- 添加表单 -->

    <!-- 修改表单 -->
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import $ from "jquery"; //先安装jquery
export default {
  data() {
    return {
      addformshow: 0,
      addformshow2: 0,
      addListshow: 1,
      changeformshow: 1,
      tableDataCopy: [],
      tableDataCopy2: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      tableData: [
        // {
        //   // id: "",
        //   // productName: "",
        //   // productMoney: "",
        //   // productPic: "",
        //   // productRecommend: "",
        //   // goodsid: "",
        //   // pskuid: "",
        //   // commodityTypeId: "",
        //   // skuId: "",
        // },
      ],
      tableData2: [
        {
          label: "",
          pid: "",
        },
      ],
      labelPosition: "right",
      formLabelAlign: {
        id: "",
        name: "",
        money: "",
        pic: "",
        recommend: "",
        goodsid: "",
        pskuid: "",
        commodityTypeId: "",
        skuId: "",
      },
      formLabelAlignCopy: {
        id: "",
        name: "",
        money: "",
        pic: "",
        recommend: "",
        goodsid: "",
        pskuid: "",
        commodityTypeId: "",
        skuId: "",
      },
      multipleSelection: [],
      currentPage: 1,
      currentPage3: 1,
      pageSize: 5,
      pageSizes: [3, 5, 10, 15],
      el: "#app1",
      judgenum: 0,
      manyc: [true, true, true, true, true, true, true, true, true],
      content: null,
      editorOption: {},
      imageUrl: "",
      imgUrl: "",
    };
  },
  methods: {
    // 退出
    quit() {
      sessionStorage.setItem("tokens", "");
      this.$router.push({name:"login",params:{flog:true}});
    },
    onSubmit() {
      var fil = document.querySelector(".addfile1").files[0];
      var proPic = "../static/head/" + fil.name;
      this.$axios.post("/goods/addGoodsSku", {
        goodsName: this.formLabelAlign.name,
        goodsPrice: this.formLabelAlign.money,
        id: this.formLabelAlign.id,
        goodsImage: proPic,
        recommend: this.formLabelAlign.recommend,
        goodsId: this.formLabelAlign.goodsid,
        commodityTypeId: this.formLabelAlign.commodityTypeId,
        // skuId:this.formLabelAlign.skuId
      });
      this.$axios.post("/goods/addGoods", {
        skuId: this.formLabelAlignCopy.skuId,
        pSkuId: this.formLabelAlignCopy.pskuid,
      });
      location.reload();
      this.$router.go(0);
    },
    changeSubmit(index, Row) {
      var fil = document.querySelector(".addfile").files[0];
      var proPic = "../static/head/" + fil.name;
      this.$axios.post("/goods/updateGoodsById", {
        goodsName: this.formLabelAlignCopy.name,
        goodsPrice: this.formLabelAlignCopy.money,
        id: this.formLabelAlignCopy.id,
        goodsImage: proPic,
        recommend: this.formLabelAlignCopy.recommend,
        goodsId: this.formLabelAlign.goodsid,
        pSkuId: this.formLabelAlign.pskuid,
        commodityTypeId: this.formLabelAlignCopy.commodityTypeId,
      });
      // this.$axios.post('/goods/addGoods',{
      //   pSkuId:this.formLabelAlignCopy.pskuid,
      // })
      //  this.$axios.post("/goods/addGoods", {
      //       skuId: this.formLabelAlignCopy.skuId,
      //        pSkuId:this.formLabelAlignCopy.pskuid,
      //       });
      location.reload();
      this.$router.go(0);
    },
    add() {
      this.$router.push("/sku");
    },
    backList() {
      this.addformshow = 0;
      this.addListshow = 1;
      this.addformshow2 = 0;
    },

    close() {
      var form = document.querySelector(".divform");
      var forms = document.querySelector(".bianjiform");
      form.style.display = "none";
      forms.style.display = "none";
      var login = document.querySelector(".login");
      login.style.display = "block";
    },
    deleteRow(index, rows) {
      this.$axios.post("/goods/del", {
        id: this.tableData[index].id,
      });
      rows.splice(index, 1);
    },
    bjRow(index, row) {
      this.$router.push({ path: "/sku", query: { obj: JSON.stringify(row) } });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    alert() {
      this.$alert("演示模式不允许操作", "系统提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$message({
            type: "info",
            message: `action: ${action}`,
          });
        },
      });
    },
    saveHtml(event) {
      //点击保存按钮保存
      alert(this.content);
    },
    addshoping(id) {
      this.$router.push({ path: "/sku", query: { id: id } });
    },
    deepCopy(obj) {
      var objClone = Array.isArray(obj) ? [] : {};
      //进行深拷贝的不能为空，并且是对象或者是
      if (obj && typeof obj === "object") {
        for (let key in obj) {
          if (obj.hasOwnProperty(key)) {
            if (obj[key] && typeof obj[key] === "object") {
              objClone[key] = this.deepCopy(obj[key]);
            } else {
              objClone[key] = obj[key];
            }
          }
        }
      }
      return objClone;
    },
  },
  mounted: function () {
    this.tableDataCopy = this.tableData;
    this.tableDataCopy2 = this.tableData2;
    this.$axios.post("/goods/findAll").then((res) => {
      for (let i = 0; i < res.data.data.length; i++) {
        this.tableData.push({
          id: res.data.data[i].id,
          productName: res.data.data[i].goodsName,
          productMoney: res.data.data[i].goodsPrice,
          productPic: res.data.data[i].goodsImage,
          productRecommend: res.data.data[i].recommend,
          goodsid: res.data.data[i].goodsId,
          commodityTypeId: res.data.data[i].commodityTypeId,
          skuId: res.data.data[i].skuId,
        });
      }
    });
    this.$axios.post("/CommodityType/findAll").then((res) => {
      for (let i = 0; i < res.data.data.length; i++) {
        if (i >= this.tableData2.length) {
          this.tableData2.push({
            label: res.data.data[i].name,
            pid: res.data.data[i].pid,
          });
        } else {
          (this.tableData2[i].label = res.data.data[i].name),
            (this.tableData2[i].pid = res.data.data[i].pid);
        }
      }
    });
  },
  watch: {},
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
};
</script>

<style>
.ruoyi {
  padding: 100px;
}

.drag {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  background-size: cover;
  z-index: 100;
}

.checkgroup {
  background-color: white;
  border: 1px solid darkgray;
  position: fixed;
  top: 100px;
  right: 0;
  z-index: 2;
}

.left-nav {
  width: 10vw;
  float: left;
}

.table {
  width: 80vw;
  float: right;
}

.iconright {
  float: right;
}

.block {
  display: block;
  float: right;
}

.clear {
  content: "";
  display: block;
  clear: both;
}

.el-form-item {
  width: 40vw;
  display: inline-block;
}

.beizhu {
  width: 80vw;
}

.beizhu input {
  height: 100px;
}

.divform {
  display: none;
}

.bianjiform {
  display: none;
}

.addform .el-input {
  width: 300px;
}

.addform .el-form-item__content {
  width: 300px;
  margin: 0 !important;
}
</style>
